﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3加载动画Loading特效代码</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="content">

	<h3>CSS3 Spinner & Loader animations</h3>
	
	<div class="wrapp">
	<div class="load-1">
	<p>Loader 1a</p>
	<div class="k-line k-line1-1"></div>
	<div class="k-line k-line1-2"></div>
	<div class="k-line k-line1-3"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-1">
	<p>Loader 1b</p>
	<div class="k-line k-line2-1" ></div>
	<div class="k-line k-line2-2" ></div>
	<div class="k-line k-line2-3" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-1">
	<p>Loader 1c</p>
	<div class="k-line k-line3-1" ></div>
	<div class="k-line k-line3-2" ></div>
	<div class="k-line k-line3-3" ></div>
	<div class="k-line k-line3-4" ></div>
	<div class="k-line k-line3-5" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-1">
	<p>Loader 1d</p>
	<div class="k-line k-line4-1" ></div>
	<div class="k-line k-line4-2" ></div>
	<div class="k-line k-line4-3" ></div>
	<div class="k-line k-line4-4" ></div>
	<div class="k-line k-line4-5 "></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-2">
	<p>Loader 2a</p>
	<div class="k-line k-line5-1" ></div>
	<div class="k-line k-line5-2" ></div>
	<div class="k-line k-line5-3" ></div>
	</div>
	</div>
	
	<div class="wrapp" style="width:250px">
	<div class="load-2">
	<p>Loader 2b</p>
	<div class="k-line k-line6-1" ></div>
	<div class="k-line k-line6-2" ></div>
	<div class="k-line k-line6-3" ></div>
	<div class="k-line k-line6-4" ></div>
	<div class="k-line k-line6-5" ></div>
	</div>
	</div>
	
	<div class="wrapp" style="width:250px">
	<div class="load-2">
	<p>Loader 2c</p>
	<div class="k-line k-line6b-1" ></div>
	<div class="k-line k-line6b-2" ></div>
	<div class="k-line k-line6b-3" ></div>
	<div class="k-line k-line6b-4" ></div>
	<div class="k-line k-line6b-5" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-3">
	<p>Loader 3a</p>
	<div class="k-line k-line7-1" ></div>
	<div class="k-line k-line7-2" ></div>
	<div class="k-line k-line7-3" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-3">
	<p>Loader 3b</p>
	<div class="k-line k-line8-1" ></div>
	<div class="k-line k-line8-2" ></div>
	<div class="k-line k-line8-3" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-3">
	<p>Loader 3c</p>
	<div class="k-line k-line9-1" ></div>
	<div class="k-line k-line9-2" ></div>
	<div class="k-line k-line9-3" ></div>
	<div class="k-line k-line9-4" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-3">
	<p>Loader 3d</p>
	<div class="k-line k-line9b-1" ></div>
	<div class="k-line k-line9b-2" ></div>
	<div class="k-line k-line9b-3" ></div>
	<div class="k-line k-line9b-4" ></div>
	<div class="k-line k-line9b-5" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-3">
	<p>Loader 3e</p>
	<div class="k-line k-line11-1" ></div>
	<div class="k-line k-line11-2" ></div>
	<div class="k-line k-line11-3" ></div>
	<div class="k-line k-line11-4" ></div>
	<div class="k-line k-line11-5" ></div>
	</div>
	</div>
	
	<div class="wrapp" style="width:700px">
	<div class="load-3">
	<p>Loader 3f</p>
	<div class="k-line2 k-line12-1" ></div>
	<div class="k-line2 k-line12-2" ></div>
	<div class="k-line2 k-line12-3" ></div>
	<div class="k-line2 k-line12-4" ></div>
	<div class="k-line2 k-line12-5" ></div>
	<div class="k-line2 k-line12-6" ></div>
	<div class="k-line2 k-line12-7" ></div>
	<div class="k-line2 k-line12-8" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<!-- Loader 4 don't work on firefox because of the border-radius and the "dashed" style. -->
	<div class="load-4">
	<p>Loader 4</p>
	<div class="k-ring-1" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5a</p>
	<div class="k-ring-2" >
		<div class="k-ball-holder">
			<div class="k-ball1a" ></div>
		</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5b</p>
	<div class="k-ring-2" style="border-color:#FFFFFF;">
		<div class="k-ball-holder">
			<div class="k-ball1b" ></div>
			<div class="k-ball2a" ></div>
		</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5c</p>
	<div class="k-ring-2" style="border-color:#3F51B5;">
		<div class="k-ball-holder2">
			<div class="k-ball1c" ></div>
			<div class="k-ball3" ></div>
			<div class="k-ball4" ></div>
		</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5d</p>
	<div class="k-ring-2" style="border-color:#000000;">
		<div class="k-ball-holder2">
			<div class="k-ball1d" ></div>
			<div class="k-ball2b" ></div>
			<div class="k-ball5a" ></div>
			<div class="k-ball6a" ></div>
		</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5e</p>
	<div class="k-ring-2" style="border:hidden;">
		<div class="k-ball-holder2">
			<div class="k-ball1e" ></div>
			<div class="k-ball2c" ></div>
			<div class="k-ball5b" ></div>
			<div class="k-ball6b" ></div>
		</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-5">
	<p>Loader 5f</p>
		<div class="k-ball-holder3">
			<div class="k-ball7a" ></div>
			<div class="k-ball7b" ></div>
			<div class="k-ball7c" ></div>
			<div class="k-ball7d" ></div>
		</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-6">
	<p>Loader 6</p>
	<div class="k-letter-holder">
		<div class="k-letter-1 k-letter">L</div>
		<div class="k-letter-2 k-letter">o</div>
		<div class="k-letter-3 k-letter">a</div>
		<div class="k-letter-4 k-letter">d</div>
		<div class="k-letter-5 k-letter">i</div>
		<div class="k-letter-6 k-letter">n</div>
		<div class="k-letter-7 k-letter">g</div>
		<div class="k-letter-8 k-letter">.</div>
		<div class="k-letter-9 k-letter">.</div>
		<div class="k-letter-10 k-letter">.</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-6">
	<p>Loader 6</p>
	<div class="k-letter-holder">
		<div class="k-letter-1b k-letter">L</div>
		<div class="k-letter-2b k-letter">o</div>
		<div class="k-letter-3b k-letter">a</div>
		<div class="k-letter-4b k-letter">d</div>
		<div class="k-letter-5b k-letter">i</div>
		<div class="k-letter-6b k-letter">n</div>
		<div class="k-letter-7b k-letter">g</div>
		<div class="k-letter-8b k-letter">.</div>
		<div class="k-letter-9b k-letter">.</div>
		<div class="k-letter-10b k-letter">.</div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-7">
	<p>Loader 7a</p>
	<div class="k-square-holder">
		<div class="k-square"></div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-7">
	<p>Loader 7b</p>
	<div class="k-square-holder">
		<div class="k-square"></div>
	</div>
	<div class="k-square-holder">
		<div class="k-square2"></div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-7">
	<p>Loader 7c</p>
	<div class='k-square-holder2'>
	  <div class='k-square3 k-square3a'></div>
	  <div class='k-square3 k-square3b'></div>
	  <div class='k-square3 k-square3c'></div>
	  <div class='k-square3 k-square3d'></div>
	</div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-7">
	<p>Loader 7d</p>
	<div class='k-square-holder2'>
	  <div class='k-square4 k-square4a'></div>
	  <div class='k-square4 k-square4b'></div>
	  <div class='k-square4 k-square4c'></div>
	  <div class='k-square4 k-square4d'></div>
	</div>
	</div>
	</div>	
		
	<div class="wrapp">
	<div class="load-8">
	<p>Loader 8a</p>
	<div class="k-line k-line10" ></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-8">
	<p>Loader 8b</p>
	<div class="k-line k-line10b"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-9">
	<p>Loader 9</p>
	<div class="k-spinner">
		<div class="k-bubble-1"></div>
		<div class="k-bubble-2"></div>
	 </div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-10">
	<p>Loader 10</p>
	<div class="k-bar"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-11">
	<p>Loader 11a</p>
	<div class="k-loader k-small"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-12">
	<p>Loader 11b</p>
	<div class="k-loader"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-13">
	<p>Loader 11c</p>
	<div class="k-loader k-circle-before"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-14">
	<p>Loader 11d</p>
	<div class="k-loader k-circle-after"></div>
	</div>
	</div>
	
	<div class="wrapp">
	<div class="load-15">
	<p>Loader 11e</p>
	<div class="k-loader k-circle"></div>
	</div>
	</div>
	
</div>

</body>
</html>
